/*
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2025-04-02 14:46:35
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-04-03 15:23:12
 * @FilePath: \react-demo\src\App.js
 */
import React, { Component } from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import List from "./components/List";
import "./App.css";

export default class App extends Component {
  state = {
    todos: [
      { id: "001", name: "吃", done: true },
      { id: "002", name: "喝", done: false },
      { id: "003", name: "玩", done: true },
      { id: "004", name: "乐", done: true },
    ],
  };
  addTodo = (item) => {
    const newTodos = [item, ...this.state.todos];
    this.setState({ todos: newTodos });
  };
  changeTodo = (id, done) => {
    const { todos } = this.state;
    const newTodos = todos.map((el) => {
      if (el.id == id) return { ...el, done };
      else return el;
    });
    this.setState({ todos: newTodos });
  };
  clearChecked = () => {
    const { todos } = this.state;
    let uncheckList = todos.filter((el) => el.done == false);

    this.setState({ todos: uncheckList });
  };
  delTodo = (id) => {
    const { todos } = this.state;
    const newTodos = todos.filter((el) => el.id != id);
    this.setState({ todos: newTodos });
  };
  changeAllStatus = (flag) => {
    console.log(flag)
    const { todos } = this.state;
    const newTodos = todos.map((el) => {el.done = flag; return el});
    this.setState({ todos: newTodos });
  };
  render() {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} todos={this.state.todos} />
          <List
            todos={this.state.todos}
            changeTodo={this.changeTodo}
            delTodo={this.delTodo}
          />
          <Footer
            todos={this.state.todos}
            clearChecked={this.clearChecked}
            changeAllStatus={this.changeAllStatus}
          />
        </div>
      </div>
    );
  }
}
